<template>
	<view class="detail_box">
		<view class="detail_header height_44 bc_fff">
			<view class="header_single left">
				<image src="../../../static/images/calendar_icon.png" class="width_16 height_16 mr_5" mode=""></image>
				<view class="fz_14 fc_333" v-if="startTime" @click="datePickModal('showStart',true)">
					{{startTime}}
				</view>
				<view class="fz_14 fc_333" v-else @click="datePickModal('showStart',true)">
					开始时间
				</view>
			</view>
			<view class="header_single">
				<image src="../../../static/images/calendar_icon.png" class="width_16 height_16 mr_5" mode=""></image>
				<view class="fz_14 fc_333" v-if="endTime" @click="datePickModal('showEnd',true)">
					{{endTime}}
				</view>
				<view class="fz_14 fc_333" v-else @click="datePickModal('showEnd',true)">
					结束时间
				</view>
			</view>
		</view>
		<view class="">
			<u-datetime-picker :show="showStart" @cancel="datePickModal('showStart',false)" :value="initDate"
				@confirm="dateConfirm($event,'startTime','showStart')" mode="date"></u-datetime-picker>
		</view>
		<view class="">
			<u-datetime-picker :show="showEnd" @cancel="datePickModal('showEnd',false)" :value="initDate"
				@confirm="dateConfirm($event,'endTime','showEnd')" mode="date"></u-datetime-picker>
		</view>
		<view class="mt_100" v-if="list.length==0&&isRequest">
			<Empty></Empty>
		</view>
		<template v-else v-for="(item,index) in list">
			<view class="height_12">

			</view>
			<view class="list width_351 height_110 box br_8 bc_fff ml_12 mr_12" :key="index" @click="bindDetail(item)">
				<view class="list_top">
					<view class="top_left">
						<view class="photo width_36 height_36 mr_12" v-if="index<=2">
							<image :src="ossUrl+'/range_' + index+1 +'.png'" class="width_36 height_36" mode=""></image>
						</view>
						<view class="number_box width_36 height_36 mr_12" v-else>
							<view class="width_28 height_23 br_14 fc fz_14 fb">
								{{index+1}}
							</view>
						</view>
						<view class="width_40 height_40 br_40 mr_12 photo_box">
							<image :src="item.avatar" mode="" class="width_40 height_40"></image>
						</view>
						<view class="fz_16 fc_000 fb">
							{{item.nickName}}
						</view>
					</view>
					<!-- <view class="">
						<u-icon name="arrow-right" color="#333333"></u-icon>
					</view> -->
				</view>
				<view class="list_bottom fz_16 fb">
					<view class="fc_333">
						业绩：¥{{item.totalCost}}
					</view>
					<view class="fc_999">
						退货：¥{{item.totalReturnCost}}
					</view>
				</view>

			</view>
		</template>

		<!-- 		<view class="list width_351 height_110 box br_8 bc_fff mt_12 ml_12 mr_12">
			<view class="list_top">
				<view class="top_left">
					<view class="number_box width_36 height_36 mr_12">
						<view class="width_28 height_23 br_14 fc fz_14 fb">
							4
						</view>
					</view>
					<view class="width_40 height_40 br_40 mr_12">

					</view>
					<view class="fz_16 fc_000 fb">
						章西
					</view>
				</view>
				<view class="">
					<u-icon name="arrow-right" color="#333333"></u-icon>
				</view>
			</view>
			<view class="list_bottom fz_16 fb">
				<view class="fc_333">
					业绩：¥325,256,254
				</view>
				<view class="fc_999">
					退货：¥356,254
				</view>
			</view>

		</view> -->
		<view class="height_19">

		</view>
	</view>
</template>

<script>
	import api from "@/service/config/api";
	import Empty from "./components/empty.vue"
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			Empty
		},
		data() {
			return {
				initDate: Number(new Date()),
				startTime: "",
				endTime: "",
				list: [],
				ossUrl: this.$ossUrl,
				showStart: false,
				showEnd: false,
				viewType: "",
				showType: "",
				managerId: "",
				isRequest:false
			}
		},
		computed: {
			...mapState(['userType']),
		},
		onLoad(options) {
			console.log("业绩详情")
			console.log(options)
			if (options && options.viewType) {
				this.viewType = options.viewType
			}
			if (options && options.showType) {
				this.showType = options.showType
			}
			if (options && options.managerId) {
				this.managerId = options.managerId
			}
			uni.setNavigationBarTitle({
				title: this.showType == 1 ? '导购业绩总览' : '店长业绩总览'
			});
			this.getDataViewDetail()
			uni.showToast({
				title:"加载中...",
				icon:"none",
				duration:600000
			})
		},
		methods: {
			bindDetail(item) {
				if (this.showType == 2) {
					uni.navigateTo({
						url: `/pages/radar/merchant/performanceDetail?viewType=${this.viewType}&showType=1&managerId=${item.customerId}`
					})
				}
			},

			dateConfirm(e, type1, type2) {
				console.log(e)
				console.log(type1)
				console.log(type2)
				this[type1] = this.$moment(e.value).format('YYYY-MM-DD')
				// if(type1 =="showStart"){

				// 	this.startTime = this.$moment(e.value).format('YYYY-MM-DD') 
				// }else {
				// 	this.endTime = this.$moment(e.value).format('YYYY-MM-DD') 
				// }
				this.datePickModal(type2, false)
				console.log(e)
				this.getDataViewDetail()
			},
			datePickModal(type, value) {
				this[type] = value
			},
			getDataViewDetail() {
				api.post("/user/api/radar/detailDataView", {
					beginTime: this.startTime,
					endTime: this.endTime,
					type: this.viewType ? Number(this.viewType) : "",
					managerId: this.managerId || ""
				}).then((res) => {
					uni.hideToast()
					this.isRequest = true
					if (res && res.code == 0) {
						this.list = res.data
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.detail_box {
		padding_bottom: 38rpx;

		.photo_box {
			overflow: hidden;
		}

		.detail_header {
			@include flex_box(row, nowrap, space-between, center);

			.header_single {
				flex: 1;
				@include flex_box(row, nowrap, center, center);

			}

			.left {
				border-right: 1px solid rgba(0, 0, 0, 0.1);
			}


		}

		.list {
			@include set_padding(0rpx, 12rpx);

			.number_box {
				background-color: #f6f6f6;
				@include flex_box(row, nowrap, center, center);
				border-radius: 56rpx;
			}

			.list_top {
				@include set_padding(12rpx, 0rpx);
				@include flex_box(row, nowrap, space-between, center);
				border-bottom: 1px solid rgba(0, 0, 0, 0.1);


				.top_left {
					@include flex_box(row, nowrap, flex-start, center);

				}
			}

			.list_bottom {
				@include set_padding(12rpx, 0rpx);
				@include flex_box(row, nowrap, space-between, center);
			}
		}
	}
</style>